<template>
  <div class="content-examlist">
    <!-- // 头部 -->
    <div class="header">
      <el-row class="left">
        <el-button
          type="primary"
          icon="el-icon-refresh-right"
          size="small"
          @click="refresh"
          >刷新</el-button
        >
      </el-row>
      <div class="el-form">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="考试名称">
            <el-input
              v-model="form.examName"
              placeholder="请输入考试名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="考试时长">
            <el-input
              v-model="form.examTimeLimit"
              placeholder="请输入考试时长"
            ></el-input>
          </el-form-item>
          <el-date-picker
            v-model="form.examStartDate"
            type="date"
            placeholder="按考试开始日期查询"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          />
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- // 内容 -->
    <div class="content">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border
      >
        <!-- <el-table-column prop="examId" label="序号"> </el-table-column> -->
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="examName" label="考试名称"> </el-table-column>
        <el-table-column prop="examDescription" label="考试科目">
        </el-table-column>
        <el-table-column prop="examScore" label="总分数"> </el-table-column>
        <el-table-column prop="examCreator" label="创建人"> </el-table-column>
        <el-table-column prop="examTimeLimit" label="时长"> </el-table-column>
        <el-table-column prop="examStartDate" label="开始时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="medium"
              plain
              @click="handleEdit(scope.$index, scope.row)"
              >进入考试</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <!-- 张三弄的分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pageSize"
        layout="total,sizes, prev, pager, next"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import allApis from "@/request";
const { fetchExamList, fetchExamQuestion } = allApis;
export default {
  name: "ExamList",
  data() {
    return {
      // 搜索框数据
      form: {
        examName: "",
        examTimeLimit: "",
        examStartDate: "",
      },

      //默认不全屏
      isFullscreen: false,
      page: 1,

      tableData: [],

      currentPage: 1, //当前页码
      pageSize: 10, //数据条数
    };
  },
  //获取数据
  created() {
    fetchExamList({examClass:this.$store.state.examClass}).then((res) => {
      console.log(res.data.data.examId);
      if (res.data.code === 200) {
        this.tableData = res.data.data;
      }
    }),
      (err) => {
        console.log(err);
        this.$message.error("获取数据失败");
      };
  },
  methods: {
    handleEdit(index, row) {
      // 点击进入考试按钮，跳转到考试页面
      sessionStorage.setItem('examId', row.examId);
      fetchExamQuestion({
        examId: row.examId,
        id: this.$store.state.userId,
      }).then((res) => {
        console.log(res);
        console.log(res.data.data);
        this.$router.push({
          name: "beginexam",
          params: {
            examTimeLimit: row.examTimeLimit,
            examDescription: row.examDescription,
            examQuestion:res.data.data
          },
        });
      });
    },
    // 张三写的分页器连接表格方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // 刷新数据
    refresh() {
      fetchExamList({examClass:this.$store.state.examClass}).then((res) => {
        console.log(res.data.data);
        if (res.data.code === 200) {
          this.tableData = res.data.data;
        }
      });
    },

    // 模糊查询
    onSearch() {
      fetchExamList(this.form).then((res) => {
        this.tableData = res.data.data;
        console.log(res);
        console.log(res.data.data);
        console.log(this.form);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content-examlist {
  width: 96%;
  margin: 0 auto;
  .header {
    height: 60px;

    .left {
      float: left;
    }

    .content {
      margin-top: 1%;
      height: auto;
    }

    .el-form {
      margin-left: 450px;
    }
  }
  .block {
    margin-top: 10px;
    text-align: center;
  }
}
</style>
